<template>
  <div id="app">
    <transition :name="`navigation-${{forward: 'in', back: 'out'}[direction]}`">
      <navigation>
        <keep-alive v-if="$route.meta  && $route.meta.keepAlive">
          <router-view></router-view>
        </keep-alive>
        <router-view v-else></router-view>
      </navigation>
    </transition>
  </div>
</template>

<script>
import { Loading } from 'vux'
import { mapState } from 'vuex'

export default {
  components: {
    Loading
  },
  computed: {
    ...mapState({
      isLoading: (state) => state.isLoading,
      route: state => state.route,
      path: state => state.route.path,
      deviceready: state => state.app.deviceready,
      direction: state => state.navigation.direction
    })
  }
}
</script>

<style lang="scss">
  @import '~@scss/style.scss';
</style>
